// import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (Vue) {
    // Vue.directive('img', {
    //   inserted (el, binding) {
    //     // 判断是否加载
    //     const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
    //       if (isIntersecting) {
    //         el.src = binding.value
    //         el.onerror = function () {
    //           el.src =
    //             'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
    //         }
    //         stop()
    //       }
    //     })
    //   }
    // })
    Vue.directive('img', {
      inserted (el, binding) {
        // 判断是否加载
        const io = new IntersectionObserver(entries => {
          // 是否进满足条件
          if (entries[0].isIntersecting) {
            el.src = binding.value

            el.onerror = function () {
              el.src =
                'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
            }
            // 取消观察
            io.unobserve(el)
          }
        })
        io.observe(el)
      }
    })
  }
}

// export default {
//   setup() {
//     const target = ref(null)
//     const targetIsVisible = ref(false)

//     const { stop } = useIntersectionObserver(
//       target,
//       ([{ isIntersecting }], observerElement) => {
//         targetIsVisible.value = isIntersecting
//       },
//     )

//     return {
//       target,
//       targetIsVisible,
//     }
//   },
// }
// export default {

// }
